<template>
  <div class='material-list'>
<!--    <a-input v-model:value='list' class='input-view'/>-->
    <div class='uploading-view' v-for='(item, index) in list' :key='index'>
      <img v-if='getTypeStatus(item) == 1' :src='item' class='image-view' >
      <img v-if='getTypeStatus(item) == 2' class='image-view' :src='`${item}?x-oss-process=video/snapshot,t_0,f_jpg`' />
      <img v-if='getTypeStatus(item) == 3' class='image-view' src='@/assets/mp3.png' />
      <div class='preview-view' @click.stop>
        <div style='width: 20px;'>
          <left-outlined v-if='index' style='font-size: 20px;color: white' @click.stop="onSortEvent('right', index)" />
        </div>
        <eye-outlined style='font-size: 20px;color: white' @click.stop='onPreview(item)' />
        <delete-outlined style='font-size: 20px;color: white' @click.stop='onDelete(index)' v-if='!disabled'/>
        <div style='width: 20px;'>
          <right-outlined v-if='index !== list.length - 1' style='font-size: 20px;color: white'
                          @click.stop="onSortEvent('left', index)" />
        </div>
      </div>
    </div>

    <div class='uploading-view' @click='isModal = true' v-if='getIsUploading()'>
      <plus-outlined style='font-size: 30px; color: #8c939d' />
    </div>
    <div class='preview-image' v-if='isImageModal'>
      <a-image :preview='{visible: isImageModal, onVisibleChange: onPreviewImageChange }' :src='previewURL' />
    </div>
  </div>
  <a-modal v-model:visible='isModal' title='素材库' width='80%' wrap-class-name='material-modal' centered
           @ok='onGroupEvent'
           @cancel='onModelCancel'>
    <Material v-if='isModal' ref='materialRef' :count='count' :type='type' isCheckbox common-class='material-content'></Material>
  </a-modal>
  <a-modal v-model:visible='isVideoModal' title='视频预览' width='100%' wrap-class-name='full-modal'>
    <video v-if='isVideoModal' class='video-item' controls='controls' autoplay='autoplay' loop='loop'
           :src='previewURL'></video>
  </a-modal>

  <a-modal v-model:visible='isAudioModal' title='音频预览' wrap-class-name='audio-modal'>
    <audio v-if='isAudioModal' :src='previewURL' loop='loop' controls='controls' autoplay='autoplay'></audio>
  </a-modal>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { PlusOutlined, LeftOutlined, EyeOutlined, DeleteOutlined, RightOutlined } from '@ant-design/icons-vue';
import Material from '@/views/material/index.vue';

export default defineComponent({
  components: {
    PlusOutlined,
    Material,
    LeftOutlined, EyeOutlined, DeleteOutlined, RightOutlined
  },
  name: 'index',
  props: {
    disabled:{
      type: Boolean,
      default: false
    },
    count: Number,
    type: String,
    list: {
      type: Array,
      default: () => []
    }
  },
  setup(props, { emit }) {
    const materialRef = ref(null);
    const isModal = ref(false);
    const isImageModal = ref(false);
    const isAudioModal = ref(false);
    const isVideoModal = ref(false);
    const previewURL = ref('');

    function onGroupEvent() {
      const list = materialRef.value.onSelect();
      const listArr = JSON.parse(JSON.stringify(props.list));
      isModal.value = false;
      emit('change', listArr.concat(list));
      emit('update:list', listArr.concat(list));
    }

    function onModelCancel() {
      isImageModal.value = false;
      isVideoModal.value = false;
      isAudioModal.value = false;
      previewURL.value = '';
    }

    function onPreview(item) {
      previewURL.value = item;
      const type = getTypeStatus(item);
      if (type == 1) return isImageModal.value = true;
      if (type == 2) return isVideoModal.value = true;
      isAudioModal.value = true;
    }

    function onSortEvent(type, index) {
      const listArr = JSON.parse(JSON.stringify(props.list));
      const item = listArr[index];
      const entityIndex = type == 'left' ? index + 1 : index - 1;
      const entity = listArr[entityIndex];
      listArr[index] = entity;
      listArr[entityIndex] = item;
      emit('change', listArr);
      emit('update:list', listArr);
    }

    function onDelete(index) {
      const imageList = JSON.parse(JSON.stringify(props.list));
      imageList.splice(index, 1);
      emit('change', imageList);
      emit('update:list', imageList);
    }

    function getTypeStatus(item) {
      const imageRegExp = /.(jpg|jpeg|png|gif)$/;
      const videoRegExp = /.(mp4)$/;
      const audioRegExp = /.(mp3)$/;
      if (imageRegExp.test(item)) return 1;
      if (videoRegExp.test(item)) return 2;
      if (audioRegExp.test(item)) return 3;
    }

    return {
      props,
      isAudioModal,
      isVideoModal,
      previewURL,
      isImageModal,
      materialRef,
      isModal,
      onSortEvent,
      onDelete,
      onGroupEvent,
      onModelCancel,
      onPreview,
      getTypeStatus,
      onPreviewImageChange: function(value) {
        isImageModal.value = value;
      },
      getIsUploading: function() {
        if (props.disabled) return  false
        console.log(props.count, props.list.length)
        if (!props.count) return true
        if (props.count > 0 && props.list.length >= props.count) return false
        return true
      }
    };
  }
});
</script>
<style lang='less'>
.material-modal {
  .ant-modal {
    .ant-modal-body {
      padding: 0 !important;
    }
  }
}

.material-content {
  width: 100% !important;
  margin: 20px 0 !important;
}

.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }

  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    background: transparent;

    .ant-modal-footer {
      display: none;
    }
  }

  .ant-modal-body {
    .video-item {
      width: 100%;
      height: calc(100vh - 200px);
    }
  }
}
</style>
<style scoped lang='less'>
.preview-image {
  display: none;
}

/deep/ .modal-material-view {
  width: 100%;
  margin: 0 !important;
}

.material-list {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  .input-view{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -11;
  }

  .uploading-view {
    width: 150px;
    height: 150px;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;

    .preview-view {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: 1;
      display: none;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 6px;
      padding: 0 5px;
    }

    .image-view {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 6px;
    }

    &:hover {
      cursor: pointer;

      .preview-view {
        display: flex;
      }
    }
  }

  .uploading-view + .uploading-view {
    margin-left: 10px;
  }
}


</style>
